Marketing copy refresh + UX/UI audit fixes (23 issues) - #4
Merged
Conversation
Ten newly-added pages (bounties, leaderboard, compare, run, use-case, use-cases, collections, skill-of-the-week, bounties/new, bounties/\$id) were orphans — no Nav, no Footer, no branding — which broke every viral CTA that pointed at them. - src/components/site/SitePage.tsx: shared chrome wrapper used by every non-landing route to inject Nav + Footer with consistent vertical flow - Wraps all 10 new routes - Nav.tsx: new "Community" dropdown surfacing Skill of the Week, Use cases, Bounties, Affiliate leaderboard (with mobile sheet parity) - Footer.tsx: new Community column with same links + Discord; grid expanded to 5 columns on md+ to keep legibility
Replaces amateur signals with professional equivalents commonly used by enterprise SaaS surfaces (Vercel/Stripe/Linear-style cards, lucide glyphs, real SVG patterns). - index.tsx WhatIsThis: emoji icons → lucide (ShieldCheck, BadgeCheck, Landmark, Plug) inside a rounded primary-tinted square - index.tsx Hero trust metrics: matching lucide icons above each counter (BadgeCheck, Landmark, ShieldAlert, Clock) - index.tsx Logos section: replaced text-mono partner marquee with a six-card "Works with" grid (Claude Code, Cursor, ChatGPT, Continue, Cline, Any MCP client). Avoids trademarked-logo issues and conveys the same compatibility claim more credibly. - run.\$slug.tsx: rotated-div watermark replaced with an SVG repeating pattern (rotate -22°, low opacity, scales to any panel size without aliasing) - ThemeToggle component (lucide Sun/Moon) added to desktop Nav next to the GitHub button; persists choice in localStorage - styles.css: scroll-behavior: smooth on html (reduce-motion users are already handled below)
Closes the remaining UI gaps surfaced by the audit. Empty + loading states - src/components/site/EmptyState.tsx: shared dashed-border card with primary-tinted icon, title, body and optional CTA - bounties.tsx, leaderboard.tsx, use-case.\$vertical.\$task.tsx, skill-of-the-week.tsx: replaced bare text fallbacks with EmptyState (Trophy / Users / Sparkles / Crown) and a one-click CTA each - run.\$slug.tsx: spinner inside primary button while running, plus a skeleton block previewing prompt + output panels so the user never stares at a frozen form Mobile - leaderboard.tsx + compare.\$pair.tsx: tables now sit in overflow-x-auto wrappers with min-w-[520px] so they scroll instead of breaking the viewport below ~520px Forms - bounties.new.tsx rebuilt with shadcn Label/Input/Textarea, helper hints under each label, a hint-rich vertical <select>, sticky footer with billing note + primary CTA Cards - LineageCard.tsx: header bar + lucide GitFork/GitBranch glyphs in rounded primary-tinted squares; the rev-share % now sits in a pill-shaped emerald badge instead of inline text - TipAuthorButton.tsx: \$5 marked "Popular" with absolute-positioned ribbon; per-amount loading state; success state shows checkmark before the modal auto-closes Compare - compare.\$pair.tsx: dedicated ScoreRow with ScoreBar component — trust/adversarial render as a colored bar (green/yellow/orange/red matching badgeColor() thresholds) plus monospace % so reviewers scan instead of read Polish - bounties.\$id.tsx: rejection codes mapped to human-readable instructions (TRUST_BELOW_THRESHOLD → "run more adversarial cases, publish a signed release, recompute, resubmit") inside a destructive banner instead of bare text - Hero CTA hierarchy: primary larger and bolder with a scale-on-hover; secondary downgraded to ghost text-link weight - SocialProof: dropped the "Real teams. Real metrics." line (fake customer names were a credibility risk) and reframed as illustrative scenarios — points at telemetry as the actual source of truth - ClientOnly minHeights reduced (900→560, 700→520) so the hydration pop isn't a viewport-eating gap OG image - src/routes/api/og.skill-of-the-week.svg.ts: dynamic 1200×630 SVG open-graph image with current winner + trust / adversarial / installs stat cards; 15-min edge cache - skill-of-the-week head meta wires the SVG into og:image + twitter:image so social shares show the winner card
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 71b00ab32b
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
Comment on lines
+21
to
+23
| useEffect(() => { | ||
| setMode(readMode()); | ||
| }, []); |
There was a problem hiding this comment.
The mount effect only updates React state (setMode(readMode())) and never applies that mode to <html>, so a previously saved dark preference in localStorage is not actually restored after a full page reload. In that scenario the icon flips to dark-mode state, but the page remains in light theme until the user toggles again, which breaks the advertised persistence behavior.
Useful? React with 👍 / 👎.
|
|
||
| function readMode(): Mode { | ||
| if (typeof document === "undefined") return "light"; | ||
| const stored = localStorage.getItem("sas-theme"); |
There was a problem hiding this comment.
localStorage.getItem("sas-theme") is called without a try/catch. In browsers/environments where storage access is blocked (e.g., strict privacy settings), this can throw a SecurityError during the effect path and break the toggle initialization inside the navigation UI.
Useful? React with 👍 / 👎.
6 tasks
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Two coupled changes that reposition the site around the moats we shipped in #2 and bring the UI up to the polish bar of a multinational SaaS surface.
Part 1 — Marketing copy refresh
The old copy said what every prompt-engineering product says ("turn your AI into an expert"). It hid the actual differentiators and left the reader guessing who the product is for.
Part 2 — UX/UI audit fixes (23 issues across P0/P1/P2)
Layout chrome (P0)
SitePagewrapper component added; all 10 newly-added routes (bounties,bounties/new,bounties/$id,leaderboard,compare/$pair,run/$slug,use-case/$vertical/$task,use-cases,collections/$slug,skill-of-the-week) now ship Nav + Footer instead of being orphan pages.Visual identity (P0)
ShieldCheck,BadgeCheck,Landmark,Plug,ShieldAlert,Clock) in primary-tinted squares.["CLAUDE", "CURSOR", ...]text-mono) replaced with a 6-card runtime grid — same compatibility claim, no trademark exposure./run/$slugwatermark moved from rotated<div>to SVG repeating-pattern with low-opacity tiling.ThemeTogglenext to GitHub button in Nav; persists in localStorage.Empty + loading states (P0/P1)
EmptyStateshared component: dashed border, primary-tinted glyph, body, optional CTA./run/$slugshows a spinner inside the CTA + a skeleton block previewing prompt/output panels.overflow-x-autowrappers withmin-w-[520px]so they scroll instead of overflowing mobile viewports.Forms (P1)
bounties/newrebuilt with shadcnLabel/Input/Textarea, per-field hint text, hint-rich vertical select, sticky billing note + primary CTA.Cards (P1)
LineageCardredesign: header bar, lucideGitFork/GitBranchglyphs in rounded primary-tinted squares, rev-share % as emerald pill badge.TipAuthorButton: $5 marked "Popular" via absolute-positioned ribbon; per-amount loading state; success animation auto-closes the modal.Compare (P1)
ScoreRow+ScoreBar: trust/adversarial render as a colored bar (green ≥85, yellow ≥70, orange ≥50, red below) plus monospace % so reviewers can scan rather than read.Polish (P1/P2)
/bounties/$idmapped to actionable human messages (e.g.TRUST_BELOW_THRESHOLD→ "run more adversarial cases, publish a signed release, recompute, resubmit").SocialProofreframed as illustrative scenarios — dropped the fake "Real teams. Real metrics." line; points at telemetry as source of truth.ClientOnly minHeightcut on two sections (900→560, 700→520) to reduce hydration pop.<html>(already gated by reduce-motion below)./api/og/skill-of-the-week.svg(1200×630 SVG, 15-min edge cache) + meta tags so social shares of/skill-of-the-weekrender the current winner with trust/adv/installs stat cards.Out of scope (deferred)
/compare/$pairand other dynamic pagesTest plan
/,/bounties,/bounties/new,/bounties/<id>,/leaderboard,/compare/code-reviewer-vs-owasp-code-audit,/run/code-reviewer,/use-cases,/use-case/security/pr-security-review,/collections/<slug>,/skill-of-the-week/api/og/skill-of-the-week.svgreturns valid SVG/api/badges/trust/<slug>.svgstill worksnpm test)Notes
Generated by Claude Code